<!-- 顶部通知栏 (类似参考网站的滚动条) -->
<div class="bg-gray-900 text-white overflow-hidden">
    <div class="animate-marquee whitespace-nowrap py-2">
        <span class="mx-4 text-sm">夏季大促：精选商品高达 70% 折扣！</span >
        <span class="mx-4 text-sm">全场免运费，无最低消费要求。</span >
        <span class="mx-4 text-sm">关注我们获取最新优惠信息。</span >
        <!-- 重复内容以实现无缝滚动效果 -->
        <span class="mx-4 text-sm">夏季大促：精选商品高达 70% 折扣！</span >
        <span class="mx-4 text-sm">全场免运费，无最低消费要求。</span >
        <span class="mx-4 text-sm">关注我们获取最新优惠信息。</span >
    </div>
</div>
<style>
    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    .animate-marquee {
        display: inline-block;
        animation: marquee 30s linear infinite;
        width: 200%; /* 假设内容重复一次 */
    }
</style>